<template>
<div class="oneData" ref="dataOne" style="width:100%;height:500px">

</div>
</template>

<script>
import { paimingNetWork } from '@/nextwork/nextworks'
var echarts = require('echarts')
export default {
  props: {
    pullTime: {
      type: Array,
      default () {
        return []
      }
    }
  },
  watch: {
    pullTime () {
      this.getPaiMing()
    }
  },
  data () {
    return {
      kefu: [],
      dateM: [],
      zong: []
    }
  },
  mounted () {
    this.getPaiMing()
  },
  methods: {
    getPaiMing () {
      paimingNetWork(this.pullTime).then(res => {
        this.kefu = res.data.kefu
        this.dateM = res.data.dateM
        this.zong = res.data.zong
        this.initEcharts()
      })
    },
    initEcharts () {
      var myChart = echarts.init(this.$refs.dataOne)
      var option = {
        title: {
          text: '最近排名趋势',
          textStyle: {
            color: 'red'
          },
          left: 'center'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: this.kefu,
          bottom: 0
        },
        grid: {
          left: '1%',
          right: '1%',
          bottom: '9%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.dateM
        },
        yAxis: {
          type: 'value'
        },
        series: this.zong
      }
      myChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
